<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
	    <meta content="telephone=no" name="format-detection" />
		<title>创建亲友圈</title>
		<link href="{{asset('/mobile/css/style.css')}}" rel="stylesheet" type="text/css">
	</head>
	<style type="text/css">
		body{
			background-color: #F1F1F1;
		}
		input{
			border: none;
			outline: none;
		}
		.inp-wrap{
			background-color: #FFFFFF;
			width: 100%;
		}
		.inp-wrap div{
			margin-bottom: 5px;
		}
		.inp-wrap div input{
			width: 100%;
			padding: 10px 20px;
			box-sizing: border-box;
		}
		.into{
			resize: none;
			padding: 10px 20px;
			box-sizing: border-box;
			width: 100%;
		}
		.qyq-con{
			background-color: white;
			padding-top: 5px;
			padding-bottom: 5px;
			margin-top: 8px;
		}
		.qyq-title{
			margin: 10px 20px 20px;
		}
		.qyq-title span{
			display: inline-block;
			vertical-align: middle;
		}
		.redline{
			background-color: #D63F15;
			width: 4px;
			height: 1rem;
			display: inline-block;
			vertical-align: middle;
		}
		.img-wrap img{
			width: 100%;
		}
		.list{
			width: 90%;
			margin: 0 auto;
		}
		.li{
			display: flex;
			width: 100%;
			margin-bottom: 10px;
		}
		.check-wrap{
			flex: 0 0 20%;
			position: relative;
		}
		.img-wrap{
			flex: 0 0 80%;
		}
		.circle{
			width: 26px;
			height: 26px;
			border-radius: 50%;
			border: 1px solid #999999;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			-webkit-transform: translate(-50%, -50%);
		}
		.circle.active{
			background-color: #D9543B;
		}
		.duigou{
			width: 80%;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			-webkit-transform: translate(-50%, -50%);
			display: none;
		}
		.btn{
			background-color: #D9543B;
			width: 90%;
			margin: 0 auto;
			padding: 10px 0;
			color: white;
			text-align: center;
			border-radius: 5px;
			margin-top: 30px;
		}
		input[type=checkbox]{
			display: none;
		}
		
	</style>
	<body>
		<form method="POST" action="/mobile/agent/friend_circle/store/{{$agent->id}}" class="circle-form">
			{{csrf_field()}}
			<div class="inp-wrap">
				<div>
					<input name="club_name" type="text" id="club_name" placeholder="请输入亲友圈名称" value="{{old('club_name')}}"/>
				</div>
				<div>
					<textarea name="description" rows=4 class="into" type="text" id="description" placeholder="请输入亲友圈简介">{{old('description')}}</textarea>
				</div>
			</div>
			<div class="qyq-con">
				<div class="qyq-title">
					<i class="redline"> </i>
					<span>选择套餐</span>
				</div>
				<div class="list">
					<div class="li">
						<div class="check-wrap">
							<input data-id="1" type="checkbox" name="pay" value="2"/>
							<div class="circle">
								<img class="duigou" src="{{asset('/imgs/duigou.png')}}"/>
							</div>
						</div>
						<div class="img-wrap">
							<img src="{{asset('/imgs/pay_chu.png')}}"/>
						</div>
					</div>
					<div class="li">
						<div class="check-wrap">
							<input data-id="2" type="checkbox" name="pay" value="3"/>
							<div class="circle">
								<img class="duigou" src="{{asset('/imgs/duigou.png')}}"/>
							</div>
						</div>
						<div class="img-wrap">
							<img src="{{asset('/imgs/pay_zhong.png')}}"/>
						</div>
					</div>
					<div class="li">
						<div class="check-wrap">
							<input data-id="3" type="checkbox" name="pay" value="4"/>
							<div class="circle">
								<img class="duigou" src="{{asset('/imgs/duigou.png')}}"/>
							</div>
						</div>
						<div class="img-wrap">
							<img src="{{asset('/imgs/pay_gao.png')}}"/>
						</div>
					</div>
					<div class="li">
						<div class="check-wrap">
							<input data-id="4" type="checkbox" name="pay" value="5"/>
							<div class="circle">
								<img class="duigou" src="{{asset('/imgs/duigou.png')}}"/>
							</div>
						</div>
						<div class="img-wrap">
							<img src="{{asset('/imgs/pay_zun.png')}}"/>
						</div>
					</div>
					<div class="li">
						<div class="check-wrap">
							<input data-id="5" type="checkbox" name="pay" value="6"/>
							<div class="circle">
								<img class="duigou" src="{{asset('/imgs/duigou.png')}}"/>
							</div>
						</div>
						<div class="img-wrap">
							<img src="{{asset('/imgs/pay_chao.png')}}"/>
						</div>
					</div>
				</div>
			</div>
			<div id="chuang" class="btn">创建</div>
			@if (count($errors) > 0)
			    @foreach($errors->all() as $error)
			    <li>{{$error}}</li>
			    @endforeach
			@endif
		</form>
	<script type="text/javascript" src="{{asset('/mobile/js/jquery-1.8.3.min.js')}}"></script>
	<script src="{{asset('/js/layer_mobile/layer.js')}}" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		jQuery(function() {
			$('#rygl').click(function() {
				console.log('人员管理')
			})
			$('.li').click(function() {
				var thisCheck = $(this).find('.check-wrap').find('input')
				var thisCircle = $(this).find('.check-wrap').find('.circle')
				var checkFlag = thisCheck.attr("checked")
				if (checkFlag) {
					console.log('已经选中了')
				} else {
					$('.check-wrap input').prop("checked", false)//逻辑
					$('.circle').removeClass('active') //效果
					$('.duigou').hide() //效果
					thisCheck.prop("checked", true) //逻辑
					thisCircle.addClass('active') //效果
					thisCircle.find('.duigou').show() //效果
				}
			})
			$('#chuang').click(function() {
				var club_name = $('#club_name').val()
				var description = $('#description').val()
				if(!club_name) {
					layer.open({
					    content: '请输入名称'
					    ,skin: 'msg'
					    ,time: 1
					});
					return
				} else {
					if (club_name.length >= 20) {
						layer.open({
						    content: '名称不超过20字'
						    ,skin: 'msg'
						    ,time: 1
						});
						return
					}
				}
				if(!description) {
					layer.open({
					    content: '请输入简介'
					    ,skin: 'msg'
					    ,time: 1
					});
					return
				} else {
					if (description.length >= 100) {
						layer.open({
						    content: '简介不超过100字'
						    ,skin: 'msg'
						    ,time: 1
						});
						return
					}
				}
				
				var id = $('input[type=checkbox]:checked').attr('data-id')
				if (id) {
					$('.circle-form').submit();
				} else {
					layer.open({
					    content: '请选择套餐'
					    ,skin: 'msg'
					    ,time: 1
					});
				}
			})
		})
		
	</script>
	</body>
</html>
